<template>
  <Main>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="money" label="金额"></el-table-column>
      <el-table-column prop="type" label="类型" sortable="custom"></el-table-column>
      <el-table-column prop="created" label="时间" sortable="custom" :formatter="dateFormatter"></el-table-column>
    </el-table>
    <page
      :page="formInline.page"
      :limit="formInline.limit"
      :total="formInline.total"
      @change="changePage"
    ></page>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { baseUrl } from "@/config/env";
import { dateForm } from "@/util/date";

const urls = {
  list: baseUrl + "/zweixin/bl/return/list_balance"
};
export default {
  methods: {
    dateFormatter(row, column) {
      return dateForm(row.created);
    },
    sortChange(column, prop, order) {
      this.formInline.sorter = {
        field: column.prop,
        order: column.order
      };
      this.fetch();
    },
    changePage(val) {
      this.formInline.page = val;
      this.fetch();
    },
    fetch() {
      axios.get(urls.list, { params: this.formInline }).then(res => {
        const data = res.data.result;
        this.tableData = data.list;
        this.formInline.page = data.pageNumber;
        this.formInline.limit = data.pageSize;
        this.formInline.total = data.totalRow;
      });
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        limit: 10,
        page: 1,
        total: 0,
        sorter: {}
      },
      tableData: []
    };
  },
  components: {
    Main,
    page
  }
};
</script>
